<template>
    <div class="section-wrap" style="height:100%;">

        <!-- 头部 -->
        <div class="headerBox">
        <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>已登记违章台账
        </div>
        </div>
        <!-- <div class="gap_div">
            <div class="list_top">违章登记数量：{{sumcount}}项</div>
            <ul class="gap_list">
              <li v-for="(items,index) in resultlist" :key="index">
                <h4>{{items.departName}}</h4>
                <p><span class="project_time">{{items.weizDate}}</span></p>
                <p class="project_status"><strong class="project_status1" v-if="items.status==1">【待整改】</strong></p>
                        <p class="project_status"><strong class="project_status1" v-if="items.status==2">【待验收】</strong></p>
                                <p class="project_status"><strong class="project_status1" v-if="items.status==3">【已完成】</strong></p>
                <x-icon type="ios-arrow-right" size="22" class="icon-right" @click="$router.push({path:'./registerBreak',query:{rocordId:$route.query.id,id:items.id,departid:$route.query.departid}})"></x-icon>
              </li>

            </ul>
        </div> -->

        <div class="form-section"  style="margin-top: 30px;">
          <div class="info_div2">
              <div class="form-item">
                  <div><span>违章登记数量：{{sumcount}}次</span></div>
              </div>
          </div>
          <div class="project_div">
              <ul class="project_list">
                   <!-- <li v-for='(item,index) in resultlist' :key="index" @click="$router.push({path:'./registerBreak',query:{rocordId:$route.query.id,id:item.id,departid:$route.query.departid}})"> -->
                   <li v-for='(item,index) in resultlist' :key="index" @click="$router.push({path:'./register2',query:{rocordId:$route.query.id,id:item.id,departid:$route.query.departid}})">
                     <div class="lf project_status">
                      <span class="worldHide" style="font-weight: bold;">{{item.weizPhenItemListName}}</span>
                      <span class="project_type statues project_status1" v-if="item.status==1" >【待整改】</span>
                      <span class="project_type statues project_status1" v-if="item.status==2"> 【待验收】</span>
                      <span class="project_type statues project_status2" v-if="item.status==3">【已完成】</span>

                    </div>
                    <div class="rf">
                      <p class="project_time">{{item.weizDate.substring(0, 10)}}</p>
                    </div>
                    <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
                  </li>
              </ul>
          </div>
      </div>
        <!-- </vue-better-scroll> -->
    </div>

</template>
<script>
  import VueBetterScroll from "vue2-better-scroll"
export default {
  data() {
    return {
      isDisabled: true, // 是否禁止输入
      params: {
        recordId:'',
        skipCount: 0,
        maxResultCount: 10
      },
      sumcount:0,

        /*下拉刷新*/
        resultlist:[],
        scrollbarObj:{fade:true},
        pullDownRefreshObj:false,
        pullUpLoadObj:{
           threshold:0,
           txt:{
             more:"加载更多",
             noMore:"没有更多数据了"
           }
        },
        startY:0,
        scrollToX:0,
        scrollToY:0,
        scrollToTime:700,
    };
  },
  components: {VueBetterScroll},
  created() {
    this.gethaveRegBreakList();
  },
 methods: {
      onPullingUp(){

       let limitcount=this.resultlist.length;
       this.params.skipCount=limitcount;
       this.gethaveRegBreakList();
      },
    gethaveRegBreakList() {
    this.params.recordId=this.$route.query.id;
      this.$axiosAjax
        .haveRegBreakList(this.params)
        .then(res => {

           if(res.data.success==true){
           let relist=res.data.result.items;
           if (this.params.skipCount == 0) {
              this.resultlist = []
           }
           this.resultlist= this.resultlist.concat(relist);
           let totalAllCount=res.data.result.totalCount;
           this.sumcount=totalAllCount;
           let resultCount=this.resultlist.length;
            if(parseInt(resultCount)<parseInt(totalAllCount))
            {
              this.$refs['scrollqq'].forceUpdate(true);
            }else
            {
              this.$refs['scrollqq'].forceUpdate(false);
            }
          }
        }).catch(
          (err)=>{

          }
        )
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
  .lf{
    float: left;
    height: 100%;
    width: 70%;


    line-height: 25px;
  }
  .rf{
    float:right;
     height: 100%;
    width: 30%;
    line-height: 50px;
    .project_time {
      margin-top: -4px;
    }
  }
    .form-i
  .info_div2 {
    border-top: none;
  }
  .project_div {
    .project_list {
      padding-left: 20px;
      li {
        border-bottom: 1px solid #efeff4;
        height: 77px;
        position: relative;
        padding-top: 18px;
        padding-right: 22px;
        h4 {
          width: calc(100% - 40px);
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 16px;
          margin-bottom: 8px;
          font-weight: bold;
        }
        p {
          span {
            font-size: 14px;
            color: #666;
          }
          span:first-child {
            margin-right: 40px;
          }
        }
        .project_status {
          margin-top: 14px;
          .worldHide{
            float: left;
            width: 150px;
            margin-top: -17px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
            overflow: hidden;
          }
          .project_type {
            float: left;
            margin-top: -6px;
            margin-left: 2px;
          }
          strong {
            font-size: 12px;
          }
          strong.project_status1 {
            color: #ff7333;
          }
          strong.project_status2 {
            color: #469b7a;
          }
          .project_status1 {
            color: #ff7333;
          }
          .project_status2 {
            color: #469b7a;
          }
        }
        .vux-x-icon {
          fill: #999;
          right: 20px;
          top: 50%;
          margin-top: -11px;
          position: absolute;
        }
      }
    }
  }
  </style>
